<template>
  <a-modal
    :title="title"
    width="80%"
    :visible="visible"
    :footer="null"
    @cancel="handleCancel">
    <div>
      <a-tabs :activeKey="activeKey" @change="callback">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="edit" />
            基本信息
          </span>
          <a-table
            class="components-table-demo-nested"
            ref="table" 
            :columns="columns" 
            :row-key="record => record.id" 
            :data-source="data" 
            :pagination="false" 
            :loading="loading" >
            <span slot="operation" slot-scope="text, record">
              <template>
                <a-popconfirm
                  title="是否删除该条记录?"
                  @confirm="confirm(record)"
                  @cancel="cancel"
                  okText="是"
                  cancelText="否"
                >
                  <a href="#">删除</a>
                </a-popconfirm>
                <a-divider type="vertical" />
                <a @click="handleEdit(record)">编辑</a>
              </template>
            </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="team" />
            成员信息
          </span>
          <a-table
            class="components-table-demo-nested"
            ref="table" 
            :columns="columns" 
            :row-key="record => record.id" 
            :data-source="data" 
            :pagination="false" 
            :loading="loading" >
            <span slot="operation" slot-scope="text, record">
              <template>
                <a-popconfirm
                  title="是否删除该条记录?"
                  @confirm="confirm(record)"
                  @cancel="cancel"
                  okText="是"
                  cancelText="否"
                >
                  <a href="#">删除</a>
                </a-popconfirm>
                <a-divider type="vertical" />
                <a @click="handleEdit(record)">编辑</a>
              </template>
            </span>
          </a-table>
        </a-tab-pane>
        <div class="editable-add-btn" v-show="this.activeKey == '1'" slot="tabBarExtraContent">
          <a-button type="primary" icon="plus" @click="handleAdd">添加</a-button>
        </div>
        <div class="editable-add-btn" v-show="this.activeKey == '2'" slot="tabBarExtraContent">
          <a-button type="primary" icon="plus" @click="handleAddPerson">添加成员信息</a-button>
        </div>
      </a-tabs>
        
      <performance-detail-add-modal ref="modal" @ok="handleOk"></performance-detail-add-modal>
      <performance-person-add-modal ref="modal1" @ok="handleOk"></performance-person-add-modal>
        
    </div>
  </a-modal>
</template>
<script>
  
  import {getUrl, postAxiosUrl } from '@/api/manage'
  import PerformanceDetailAddModal from './PerformanceDetailAddModal'
  import PerformancePersonAddModal from './PerformancePersonAddModal'
  
export default {
  components: {
    PerformanceDetailAddModal,
    PerformancePersonAddModal
  },
  data() {
    return {
      visible : false,
      loading : false,
      title : '',
      parentId : '',
      firSettingId : '',
      data: [],
      activeKey : '1',
      columns: [
        {
          title: '字段类型',
          dataIndex: 'n_type_name'
        },
        {
          title: '编码',
          dataIndex: 'code',
        },
        {
          title: '名称',
          dataIndex: 'name',
        },
        {
          title: '是否必填',
          dataIndex: 'is_required_value',
        },
        {
          title: '数据字典',
          dataIndex: 'SNAME',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }
  },
  created() {
    
  },
  methods: {
    handleCancel () {
        this.visible = false
    },
    handleOk(id){
       this.parentId = id
        if(this.activeKey == '1'){
          this.fetch()
        }else if(this.activeKey == '2'){
          this.fetchPerson()
        }
    },
     show(obj){
        this.activeKey = '1'
          this.visible = true
          this.title = obj.sedName + '-' +obj.name
          this.parentId = obj.id
          this.firSettingId = obj.parentId
          this.fetch()
        },
    onDelete(key) {
      const dataSource = [...this.dataSource]
      this.dataSource = dataSource.filter(item => item.key !== key)
    },
    handleAdd() {
      this.$refs.modal.add( this.parentId, this.firSettingId)
    },
    handleAddPerson() {
      this.$refs.modal1.add( this.parentId)
    },
    confirm (record) {
      var url = 'cutSedSettingDetail/del'
      if(this.activeKey == '2'){
       url = 'cutSedSettingPerson/del'
      }
      const me = this
            postAxiosUrl(url, {id : record.id})
              .then(res => {
                if(me.activeKey == '1'){
                  me.fetch()
                }else if(me.activeKey == '2'){
                  me.fetchPerson()
                }
              })
    },
    handleEdit (record) {
       if(this.activeKey == '1'){
            this.$refs.modal.edit(record, this.firSettingId)
       }else if(this.activeKey == '2'){
           this.$refs.modal1.edit(record)
       }
    },
    cancel(e) {
    },
    callback(key){
      this.activeKey = key
      if(key == '1'){
        this.fetch()
      }else if(key == '2'){
        this.fetchPerson()
      }
    },
    fetchPerson(params = {}) {
        this.loading = true
        var _this = this
        params.settingId = this.parentId
        return getUrl('cutSedSettingPerson/getAll', params)
          .then(data => {
            this.loading = false
            this.data = data.result
      
          })
    },
    fetch(params = {}) {
      this.loading = true
      var _this = this
      params.settingId = this.parentId
      return getUrl('cutSedSettingDetail/getAll', params)
        .then(data => {
          this.loading = false
          this.data = data.result
    
        })
    },
  },
}
</script>
<style>

</style>